
<template>
  <div class="news-container">
    <h1 class="header">
      <span class="title">新闻中心</span>
      <span class="time">{{ time }}</span>
    </h1>
    <div class="content">
      <div class="left-wrap">
        <img src="../../assets/images/news_1.jpg" />
        <span class="desc">
          中国农学会举办高粱产业创新大会推动高粱产业向高...
        </span>
      </div>

      <div class="right-wrap">
        <ul class="news-list">
          <li
            class="news-item"
            v-for="(item, idx) in news"
            :key="idx"
          >
            {{ item.content }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import moment from 'moment';
const time = ref('');
const news = ref([
  {
    content: '《三农舆情蓝皮书——中国三农网络舆情报告（2023）》报告在杭州发布'
  },
  {
    content: '“十百千万”农业后备人才培养工程海南三亚启动'
  },
  {
    content: '2023年期货市场规模稳步扩大 “保险+期货”模式服务乡村振兴见实效'
  },
  {
    content: '秸秆还田生态效应监测年度总结交流会在京召开'
  },
  {
    content: '国家肉鸡产业技术体系首席科学家：肉鸡育种将更重品质'
  },
  {
    content: '元旦春节期间蔬菜市场呈现供销两旺态势 居民“菜篮子”货足价稳'
  },
  {
    content: '我国将推广农村客运车辆代运邮件快件'
  }
]);

onMounted(() => {
  time.value = moment(new Date()).format('YYYY.MM.DD');
})
</script>

<style lang="scss" scoped>
.news-container{
  box-shadow: 0px 0px 12px rgba(0, 0, 0, .12);
  border: 1px solid#e4e7ed;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 40px;
  .header{
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    .title{
      font-size: 20px;
      font-weight: 700;
    }

    .time{
      font-size: 16px;
    }
  }

  .content{
    display: flex;

    .left-wrap {
      position: relative;
      margin-right: 40px;
      img{
        width: 591px;
      }

      .desc{
        position: absolute;
        left: 20px;
        bottom: 20px;
        color: #FFF;
      }
    }

    .right-wrap{
      .news-list{
        list-style: outside;
        .news-item{
          height: 50px;
          line-height: 50px;
          cursor: pointer;
          &:hover{
            color: #F17600;
          }
        }
      }
    }
  }
}
</style>